{extend name="base" /}
<!-- page specific plugin styles -->
{block name="inline-styles"}
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page js_show">
    <div class="page__bd" style="height: 100%">
        <div class="weui-tab">
            <div class="weui-tab__panel">

				<div class="weui-panel weui-page-home_head" style="margin-bottom: 0">
					<div class="weui-panel__bd">
						<div class="weui-flex weui-nav--order">
							<a class="weui-flex__item" href="{:url('Index/order')}?id=0">
								<div class="weui-grid__icon">
									<i class="fa fa-list"></i>
								</div>
								<p class="weui-grid__label ">全部订单</p>
							</a>
							<a class="weui-flex__item" href="{:url('Index/order')}?id=1">
								<div class="weui-grid__icon">
									<i class="fa fa-truck"></i>
								</div>
								<p class="weui-grid__label">待发货</p>
							</a>
							<a class="weui-flex__item" href="{:url('Index/order')}?id=3">
								<div class="weui-grid__icon">
									<i class="fa fa-fighter-jet"></i>
								</div>
								<p class="weui-grid__label">已发货</p>
							</a>
							<a class="weui-flex__item" href="{:url('Index/order')}?id=4">
								<div class="weui-grid__icon">
									<i class="fa fa-cogs"></i>
								</div>
								<p class="weui-grid__label">申换/售后</p>
							</a>
						</div>
					</div>
                    <div class="weui-panel__ft">
                        <div class="weui-search-bar weui-search--goods" id="searchBar">
                            <form class="weui-search-bar__form" id="searchForm" action="javascript:searchForm();">
                                <div class="weui-search-bar__box">
                                    <i class="weui-icon-search"></i>
                                    <input type="search" class="weui-search-bar__input" autocomplete="off" autocorrect="off" id="searchInput" name="goodsname" placeholder="搜索">
                                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                                </div>
                                <label class="weui-search-bar__label" id="searchText">
                                    <i class="weui-icon-search"></i>
                                    <span>搜索</span>
                                </label>
                            </form>
                        </div>
                    </div>
				</div>
				
				<div class="weui-panel">
					<div class="weui-panel__bd">
						<div class="weui-grids">
							<a href="javascript:show(1);" class="weui-grid js_grid">
								<div class="weui-grid__icon">
									<i class="fa fa-pie-chart"></i>
								</div>
								<p class="weui-grid__label">限时基础品</p>
							</a>
							<a href="javascript:show(2);" class="weui-grid js_grid">
								<div class="weui-grid__icon">
									<i class="fa fa-line-chart"></i>
								</div>
								<p class="weui-grid__label">限时高端品</p>
							</a>
							<a href="javascript:;show(3);" class="weui-grid js_grid">
								<div class="weui-grid__icon">
									<i class="fa fa-dollar"></i>
								</div>
								<p class="weui-grid__label">季节常在品</p>
							</a>
						</div>
					</div>
				</div>
				<div id="listData" style="margin-top: 10px;"></div>

            </div>
            <div class="weui-tabbar">
                <a href="{:url('Index/home')}" class="weui-tabbar__item">
                    <div class="weui-tabbar__icon">
                    	<i class="fa fa-home"></i>
                    </div>
                    <p class="weui-tabbar__label">主页</p>
                </a>
                <a href="{:url('Index/goods')}" class="weui-tabbar__item weui-bar__item_on">
                    <div class="weui-tabbar__icon">
                    	<i class="fa fa-list"></i>
                    </div>
                    <p class="weui-tabbar__label">下单</p>
                </a>
            </div>
        </div>
    </div>
</div>
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script type="text/javascript" src="{$Think.const.STATIC_DOMAIN}/static/jquery-countdown/js/jquery.plugin.min.js"></script>
<script type="text/javascript" src="{$Think.const.STATIC_DOMAIN}/static/jquery-countdown/js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="{$Think.const.STATIC_DOMAIN}/static/jquery-countdown/js/jquery.countdown-zh-CN.js"></script>
<script type="text/javascript">
    
    query(1);
    function query(cateId){
    	$.ajax({
            url: '/api/v1/goods/homelists',
            type: 'POST',
            dataType: 'json',
            data:{
                draw: 1,
                catid:cateId
            }
        })
        .done(function(json) {
            console.log("success");
            renderData("#listData",json.data);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
    }
    // 渲染列表
    function renderData(_elment,_data){
    	$(_elment).empty();
        for(var i= 0; i<_data.length;i++){
        	var yu = '无货';
        	if(_data[i].stock > 0){
        		yu = '还剩余'+ ((_data[i].stock * 100)/(_data[i].stock + _data[i].sales)).toFixed(2) +'%';
        	}
            var _item =
            '<div class="weui-panel weui-goods-item" data-start="'+_data[i].start_time+'" data-end="'+_data[i].end_time+'" data-quantity="'+_data[i].stock+'" data-sales="'+_data[i].sales+'">\
                <div class="weui-panel__hd">\
                    <span class="weui-panel__heading">正在热卖</span>\
                    <span class="count-time" id="countdown_'+_data[i].id+'"></span>\
                </div>\
                <div class="weui-panel__bd">\
                    <div class="weui-media-box weui-media-box_appmsg">\
                        <div class="weui-media-box__hd">\
                          <img class="weui-media-box__thumb" src="'+_data[i].pic+'" alt="">\
                        </div>\
                        <div class="weui-media-box__bd">\
                            <h4 class="weui-media-box__title">'+_data[i].goodsname+'</h4>\
                            <b class="weui-wepay-color-lightblue">库存剩余：'+_data[i].stock+'件</b>\
                            <div class="weui-flex weui-media-box__desc">\
                                <div class="weui-flex__item">'+yu+'</div>\
                                <span>已购'+_data[i].sales+'件</span>\
                            </div>\
                            <div class="weui-progress" style="margin-bottom: 5px;">\
                                <div class="weui-progress__bar">\
                                    <div class="weui-progress__inner-bar js_progress" style="width: 0%;"></div>\
                                </div>\
                            </div>\
                            <div class="weui-flex">\
                                <div class="weui-flex__item weui-wepay-color-orange">￥'+_data[i].price+'</div>\
                                <a href="{:url('Index/goods_detail')}?id='+_data[i].id+'" class="weui-btn weui-btn_mini weui-btn_primary" style="display:none">马上抢</a>\
                            </div>\
                        </div>\
                    </div>\
                </div>\
                <div class="weui-panel__ft">\
                  <div class="weui-flex">\
                    <div class="weui-flex__item weui-desc">活动已结束</div>\
                  </div>\
                </div>\
            </div>';

            $(_elment).append(_item);
            
            start('#countdown_'+_data[i].id, _data[i].start_time, _data[i].end_time, _data[i].stock, _data[i].sales, _data[i].is_time_limit);
        }

    }

// 初始化倒计时，库存销量
function start(_elment,_startTime,_endTime,_stock,_sales,_is_time_limit) {
    var barWidth = Math.floor((1 - _sales / (_stock + _sales)) * 100);
    if(isNaN(barWidth)) {
        barWidth = 0;
    }
    $(_elment).parents('.weui-goods-item').find('.weui-progress__bar .js_progress').css('width', barWidth + '%');
    $(_elment).parents('.weui-goods-item').find('.weui-media-box__desc .weui-flex__item').text("还剩余" + barWidth + '%');

    if(_stock > 0 && _is_time_limit==1){
        //有货|限时
        var newDate = new Date();
        var startTime= new Date(timestampToTime(_startTime));
        var endTime= new Date(timestampToTime(_endTime));

        if(newDate >= endTime){
            $(_elment).prev('.weui-panel__heading').text('活动已结束');
            $(_elment).parents('.weui-goods-item').find('.weui-panel__ft').show().find('.weui-desc').text('活动已结束');
            return false;
        }
        $(_elment).prev('.weui-panel__heading').text('即将开始');
        $(_elment).countdown({
            layout:'{desc}{d<}{dn}{dl}{d>}{h<}{hn}{hl}{h>}{m<}{mn}{ml}{m>}{sn}{sl}',
            until: startTime,
            format: 'dHMS',
            description:"距活动开始：",
            alwaysExpire:true,
            onExpiry:function(){
                $(_elment).prev('.weui-panel__heading').text('正在热卖');
                //活动开始
                $(_elment).parents('.weui-goods-item').find('.weui-btn_primary').show();  //显示购买按钮
                $(_elment).countdown('option',{
                    until: endTime,
                    format: 'dHMS',
                    description:'距活动结束：',
                    alwaysExpire:true,
                    onExpiry:function(){
                        //活动结束
                        $(_elment).prev('.weui-panel__heading').text('活动已结束');
                        $(_elment).parents('.weui-goods-item').find('.weui-panel__ft').show().find('.weui-desc').text('活动已结束');
                        $(_elment).parents('.weui-goods-item').find('.weui-btn_primary').hide();
                        $(_elment).countdown('destroy').css("display","none");  //删除倒计时
                    }
                });
            }
        });
    }else if(_stock > 0 && _is_time_limit==0){
        //有货|非限时
        $(_elment).parents('.weui-goods-item').find('.weui-btn_primary').show();
        $(_elment).hide();
    }else{
        //无货
        $(_elment).parents('.weui-goods-item').find('.weui-panel__ft').show().find('.weui-desc').text('产品已售罄');
    }
    
}

// 将时间戳转换日期格式
function timestampToTime(timestamp) {
    var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    Y = date.getFullYear() + '/';
    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/';
    D = date.getDate() + ' ';
    h = date.getHours() + ':';
    m = date.getMinutes() + ':';
    s = date.getSeconds();
    return Y+M+D+h+m+s;
}
function show(cateId){
    query(cateId)
}
// 搜索
function searchForm(argument) {
    // body...
    var options={
        url:"/api/v1/goods/homelists",
        type:"POST",
        dataType:"json",
        data:{
            draw: 1
        },
        success: function(json){

            if(json.returnCode==1){
                renderData("#listData",json.data);
            }else{
                $.toptip(json.returnMsg, 'error');
            }
        }
    };
    $("#searchForm").ajaxSubmit(options);
}

</script>
{/block}